<template>
  <div>
    <div style="margin-bottom: 5px;">
      <Button type="success" @click="handleAddProject" :disabled="loadTable">
        <Icon type="android-add"></Icon>
        新增项目
      </Button>
      <Button type="error" :disabled="loadTable" @click="handleDeleteButtonClick">
        <Icon type="trash-b"></Icon>
        删除
      </Button>
    </div>
    <Table :columns="columns" :data="data" :loading="loadTable" 
    border highlight-row ref="currentTable" 
    @on-current-change="handleCurrentChange"></Table>
  </div>
</template>
<script>
import querystring from 'querystring';
import { HOST } from '../../libs/config.js';
import {loginInvalid} from "../../libs/loginInvalidNotice.js";
export default {
  name: 'projectManage',
  
  props: {

  },
  data() {
    return {
      curProejctId: -1,
      modalIsOn: false,
      loading: true,
      loadTable: true,
      newPassword: '',
      addProjectForm: {

      },
      columns:[
        {
          title: '项目名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '项目金额',
          key: 'money',
          align: 'center',
        },
        {
          title: '可用余额',
          key: 'balance',
          align: 'center',
        },
        {
          title: '项目描述',
          key: 'summary',
          align: 'center',
        },
        {
          title: '项目负责人',
          key: 'leader',
          align: 'center',
        },
        {
          title: '负责人联系方式',
          key: 'leader_phone',
          align: 'center',
        },
        {
          title: '指导老师',
          key: 'teacher',
          align: 'center',
        },
        {
          title: '指导老师联系方式',
          key: 'teacher_phone',
          align: 'center',
        },        
        {
          title: '.',
          align: 'center',
          fiexed: 'right',
          render: (h, params) => {
            return h('i-button', {
              props: {
                type: 'info'
              },
              on: {
                'click': () => {
                  this.$router.push({
                    name: 'project-detail',
                    params: {
                       projectId:  params.row.project_id,
                       projectName: params.row.name
                    }
                  })  
                }
              }
            }, '详情')
          }
        },

      ],
      data: [

      ]
    }
  },
  methods: {
    refreshProjectList() {
      this.$axios.get(HOST + '/project/list', {
        withCredentials: true
      })
      .then((response) => {
        this.loadTable = false;
        let data = response.data;
        if (data.length > 0) {
          this.data = data;
        }
      })
      .catch((err) => {
        if (err.data.status === 'invalid Token') {
          loginInvalid(this)();
        }
      })
    },
    handleAddProject() {
      this.$Modal.confirm({
        render: (h) => {
          return h('div',[
            h('div', {
              style: {
                'margin-bottom': '20px'
              }
            }, [
              h('Tag', {
                style: {
                  'margin-right': '70px',
                },
                props: {
                  color: 'blue'
                }
              }, '项目名称'),
              h('i-input', {
                props: {
                  value: this.addProjectForm.name,
                },
                attrs: {
                  placeholder: '请输入项目名称'
                },
                style: {
                  width: '250px'
                },
                on: {
                  'on-blur': (e) => {
                    this.addProjectForm.name = e.target.value;
                  }
                }
              })
            ]),
            h('div', {
              style: {
                'margin-bottom': '20px'
              }
            }, [
              h('tag', {
                style: {
                  'margin-right': '70px'
                },
                props: {
                  color: 'blue'
                }
              }, '项目金额'),
              h('i-input', {
                props: {
                  value: this.addProjectForm.money
                },
                attrs: {
                  placeholder: '请输入项目金额'
                },
                style: {
                  width: '250px'
                },
                on: {
                  'on-blur': (e) => {
                    this.addProjectForm.money = e.target.value;
                  }
                }
              })
            ]),
            h('div', {
              style: {
                'margin-bottom': '20px'
              }
            }, [
              h('tag', {
                style: {
                  'margin-right': '70px'
                },
                props: {
                  color: 'blue'
                }
              }, '项目描述'),
              h('div', {
                style: {
                  width: '250px',
                },
                
              },[
                h('i-input', {
                  props: {
                    value: this.addProjectForm.summary,
                    type: 'textarea',
                  },
                  
                  attrs: {
                    placeholder: '请输入项目描述',
                  },
                  on: {
                    'on-blur': (e) => {
                      this.addProjectForm.summary = e.target.value;
                    }
                  }
                })
              ])
            ]),
            h('div', {
              style: {
                'margin-bottom': '20px'
              }
            }, [
              h('tag', {
                style: {
                  'margin-right': '70px'
                },
                props: {
                  color: 'blue'
                }
              }, '项目负责人'),
              h('i-input', {
                props: {
                  value: this.addProjectForm.leader
                },
                attrs: {
                  placeholder: '请输入项目负责人'
                },
                style: {
                  width: '250px'
                },
                on: {
                  'on-blur': (e) => {
                    this.addProjectForm.leader = e.target.value;
                  }
                }
              })
            ]),
            h('div', {
              style: {
                'margin-bottom': '20px'
              }
            }, [
              h('tag', {
                style: {
                  'margin-right': '70px'
                },
                props: {
                  color: 'blue'
                }
              }, '负责人联系方式'),
              h('i-input', {
                props: {
                  value: this.addProjectForm.leader_phone
                },
                attrs: {
                  placeholder: '请输入负责人联系方式'
                },
                style: {
                  width: '250px'
                },
                on: {
                  'on-blur': (e) => {
                    this.addProjectForm.leader_phone = e.target.value;
                  }
                }
              })
            ]),
            h('div', {
              style: {
                'margin-bottom': '20px'
              }
            }, [
              h('tag', {
                style: {
                  'margin-right': '70px'
                },
                props: {
                  color: 'blue'
                }
              }, '指导老师'),
              h('i-input', {
                props: {
                  value: this.addProjectForm.teacher
                },
                attrs: {
                  placeholder: '请输入指导老师'
                },
                style: {
                  width: '250px'
                },
                on: {
                  'on-blur': (e) => {
                    this.addProjectForm.teacher = e.target.value;
                  }
                }
              })
            ]),
            h('div', {
              style: {
                'margin-bottom': '20px'
              }
            }, [
              h('tag', {
                style: {
                  'margin-right': '70px'
                },
                props: {
                  color: 'blue'
                }
              }, '指导老师联系方式'),
              h('i-input', {
                props: {
                  value: this.addProjectForm.teacher_phone
                },
                attrs: {
                  placeholder: '请输入指导老师联系方式'
                },
                style: {
                  width: '250px'
                },
                on: {
                  'on-blur': (e) => {
                    this.addProjectForm.teacher_phone = e.target.value;
                  }
                }
              })
            ]),
          ])
        },
        loading: true,
        title: '添加项目',
        onOk: () => {
          this.handleAddProjectOk();
        },
        onCancel: () => {
          this.$Modal.remove();
        }
      })
    },
    initProjectForm() {
      this.addProjectForm = {
        name: '',
        money: '',
        summary: '',
        leader: '',
        leader_phone: '',
        teacher: '',
        teacher_phone: ''
      }
    },
    handleAddProjectOk() {
      let flag = true;
      for (let item in this.addProjectForm) {
        if (this.addProjectForm[item].trim() === '') {
          flag = false;
        }
      }
      if (!flag) {
        this.$Notice.error({
          title: '添加项目错误',
          desc: `有未填写表单项`,
          duration: 2
        });
        this.$Modal.remove();
      } else {
        this.$axios.post(HOST + '/project/add',
          querystring.stringify({
            'name': this.addProjectForm['name'],
            'money': this.addProjectForm['money'],
            'summary': this.addProjectForm['summary'],
            'leader': this.addProjectForm['leader'],
            'leader_phone': this.addProjectForm['leader_phone'],
            'teacher': this.addProjectForm['teacher'],
            'teacher_phone': this.addProjectForm['teacher_phone'],
          }), {
            withCredentials: true
        })
        .then((response) => {
          this.$Modal.remove();
          if (response.data.status === 'success') {
            this.$Notice.success({
              title: '更改成功',
              desc: `项目${this.addProjectForm.name}添加成功`,
              duration: 2
            });
            this.initProjectForm();
            this.refreshProjectList();
          } else {
            this.$Notice.error({
              title: '更改失败',
              desc: `项目${this.addProjectForm.name}添加失败`,
              duration: 2                  
            });
          }
        })
        .catch((err) => {
          if (err.data.status === 'invalid Token') {
            loginInvalid(this)();
          }
        })
      }
    },
    handleDeleteButtonClick() {
      if (this.curProejctId === -1) {
        this.$Notice.warning({
          title: '修改错误',
          desc: `请点击选中需要修改的行`,
          duration: 2
        });
      } else {
        this.$Modal.confirm({
          title: '确认删除',
          content: '你确定要删除该项目么？',
          onOk: () => {
            this.handleDeleteButtonOkClick();
          },
          onCancel: () => {
            this.$Modal.remove();
          }
        });
      }
    },
    handleDeleteButtonOkClick() {
      this.$axios.post(HOST + '/project/projectDel',
          querystring.stringify({
            'id': this.curProejctId,
          }), {
            withCredentials: true
          })
        .then((response) => {
          this.$Modal.remove();
          if (response.data.status === 'success') {
            this.$Notice.success({
              title: '更改成功',
              desc: `项目删除成功`,
              duration: 2
            });
            this.initCurProjectId();
            this.refreshProjectList();
          } else {
            this.$Notice.error({
              title: '更改失败',
              desc: `项目删除失败`,
              duration: 2
            });
          }
        })
        .catch((err) => {
          if (err.data.status === 'invalid Token') {
            loginInvalid(this)();
          }
        })
    },
    handleCurrentChange(newRow, oldRow) {
      this.curProejctId = newRow.project_id;
    },
    initCurProjectId() {
      this.curProjectId = -1;
    }
  },
  mounted() {
    this.refreshProjectList();
    this.initProjectForm();
  }
}


</script>
